<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的订单</title>
    <script src="js/jquery.min.js"></script>
    <script src="js/logout.js"></script>
    <link rel="stylesheet" href="./css/common.css">
    <script src="js/logout.js"></script>
    <link rel="stylesheet" href="./css/my_order.css">

</head>
<body>
<header>
    <nav>
        <div id="loginControl">
            <!--            <ul>-->
            <!--                            <li><a href="index.html">首页</a></li>-->
            <!--            <li><a href="my_order.html">我的订单</a></li>-->
            <!--            <li id="loginState"><a href="login.html">注册/登录</a></li>-->
            <!--            <li id="logoutState"><a href="javascript: logout()">退出登录</a></li>-->
            <!--            <li><a href="#">联系我们</a></li>-->
            <!--            <div class="slider"></div>-->
            <!--            </ul>-->
        </div>
    </nav>
</header>
<script src="js/detectLoginStatusTool.js"></script>
<table align="center" width="980" border="0" cellspacing="0" cellpadding="0">

</table>
<table align="center" width="980" border="0" cellspacing="0" cellpadding="0" class="ordertab1">
    <!--    <tr class="orderbg">-->
    <!--        <td height="36" colspan="2">电影名称</td>-->
    <!--        <td width="108">单价 (元)</td>-->
    <!--        <td width="102">座位号</td>-->
    <!--        <td width="170">实 (应) 付款 (元)</td>-->
    <!--        <td width="168">订单状态</td>-->
    <!--    </tr>-->
    <!--    <tr>-->
    <!--        <td colspan="8" class="orderbg1"><span>-->
    <!--              <input name="" type="checkbox" value=""/>-->
    <!--              </span><span>订单编号：1049865231</span><span> 成交时间：2011-10-25 </span><span>万达影城(南阳中泰IMAX店) </span>-->
    <!--        </td>-->
    <!--    </tr>-->
    <!--    <tr align="center">-->
    <!--        <td width="111" height="96"><p class="proimg"><img src="./img/刀剑神域.jpg" width="60" height="60"/></p></td>-->
    <!--        <td width="188">刀剑神域进击篇：暮色黄昏</td>-->
    <!--        <td>30.0</td>-->
    <!--        <td><strong>1_1</strong></td>-->
    <!--        <td rowspan="2"><p>60.0</p>-->
    <!--        <td rowspan="2"><p class="green">已支付</p>-->
    <!--        <p class="blue"><button class="button"><span>详情</span></button></p>-->
    <!--    </tr>-->
    <!--    <tr align="center">-->
    <!--        <td height="96"><p class="proimg"><img src="./img/刀剑神域.jpg" width="60" height="60"/></p></td>-->
    <!--        <td>刀剑神域进击篇：暮色黄昏</td>-->
    <!--        <td>30.0</td>-->
    <!--        <td><strong>1_2</strong></td>-->
    <!--    </tr>-->
    <!--    <tr>-->
    <!--        <td colspan="8" class="orderbg1"><span>-->
    <!--              <input name="" type="checkbox" value=""/>-->
    <!--              </span><span>订单编号：1049865231</span><span> 成交时间：2011-10-25</span><span>万达影城(南阳中泰IMAX店) </span>-->
    <!--        </td>-->
    <!--    </tr>-->
    <!--    <tr align="center">-->
    <!--        <td height="96"><p class="proimg"><img src="img/银河护卫队.jpg" width="60" height="60"/></p></td>-->
    <!--        <td>银河护卫队3</td>-->
    <!--        <td>30.0</td>-->
    <!--        <td><strong>1_7</strong></td>-->
    <!--        <td><p>30.0</p>-->
    <!--        <td><p class="red">未支付</p>-->
    <!--        <p class="blue"><button class="button"><span>去支付</span></button></p>-->
    <!--        </td>-->
    <!--    </tr>-->
</table>


<script src="js/jquery.min.js"></script>
<script>
    // // 测试!!!
    // let temporaryHtml = '<tr class="orderbg">\n' +
    //     '        <td height="36" colspan="2">电影名称</td>\n' +
    //     '        <td width="108">单价 (元)</td>\n' +
    //     '        <td width="102">座位号</td>\n' +
    //     '        <td width="170">实 (应) 付款 (元)</td>\n' +
    //     '        <td width="168">订单状态</td>\n' +
    //     '    </tr>';
    // temporaryHtml += '<tr><td colspan="8" class="orderbg1"><span><input name="" type="checkbox" value=""/>';
    // temporaryHtml += '</span><span>订单编号：' + '123333333';
    // temporaryHtml += '</span><span> 成交时间：' + '2023-06-03' + '</span><span>万达影城(南阳中泰IMAX店)</span></td></tr>';
    //
    // // 2. 把每个订单的第一条信息拼上去
    // temporaryHtml += '<tr align="center"><td width="111" height="96"><p class="proimg"><img src="./img/' + '刀剑神域.jpg' + '" width="60" height="60"/></p></td>';
    // temporaryHtml += '<td width="188">' + '刀剑神域进击篇：暮色黄昏' + '</td><td>30.0</td>';
    // temporaryHtml += '<td><strong>' + '1_1' + '</strong></td>'
    // temporaryHtml += '<td rowspan="' + '2'  + '"><p>' + '60.0'  + '</p><td rowspan="2"><p';
    //
    // temporaryHtml += 'class="green">已支付</p>';
    // temporaryHtml += '<p class="blue"><button class="button"><span>订单详情</span></button></p></tr>'
    //
    //
    //
    // temporaryHtml += '<tr align="center"><td height="96"><p class="proimg"><img src="./img/'+ '刀剑神域.jpg'+'"width="60" height="60"/></p></td>';
    // temporaryHtml += '<td>' + '刀剑神域进击篇：暮色黄昏' + '</td>';
    // temporaryHtml += '<td>30.0</td>';
    // temporaryHtml += '<td><strong>' + '1_2' + '</strong></td></tr>';
    //
    // jQuery(".ordertab1").html(temporaryHtml);

    // let body = [[{
    //     "userid": 0,
    //     "id": 0,
    //     "name": "速度与激情10",
    //     "screeningroom": null,
    //     "begintime": null,
    //     "seat": "1_10",
    //     "createTime": "2023-06-05 20:19:32",
    //     "orderNumber": 1685806113101,
    //     "state": "1",
    //     "photo": "速度与激情10.jpg"
    // }, {
    //     "userid": 0,
    //     "id": 0,
    //     "name": "速度与激情10",
    //     "screeningroom": null,
    //     "begintime": null,
    //     "seat": "1_10",
    //     "createTime": "2023-06-05 20:30:17",
    //     "orderNumber": 1685806113101,
    //     "state": "1",
    //     "photo": "速度与激情10.jpg"
    // }, {
    //     "userid": 0,
    //     "id": 0,
    //     "name": "速度与激情10",
    //     "screeningroom": null,
    //     "begintime": null,
    //     "seat": "1_9",
    //     "createTime": "2023-06-05 20:30:17",
    //     "orderNumber": 1685806113101,
    //     "state": "1",
    //     "photo": "速度与激情10.jpg"
    // }], [{
    //     "userid": 0,
    //     "id": 0,
    //     "name": "速度与激情10",
    //     "screeningroom": null,
    //     "begintime": null,
    //     "seat": "1_8",
    //     "createTime": "2023-06-05 20:30:17",
    //     "orderNumber": 1685806113101,
    //     "state": "1",
    //     "photo": "速度与激情10.jpg"
    // }], [{
    //     "userid": 0,
    //     "id": 0,
    //     "name": "哆啦A梦: 大雄与天空的理想乡",
    //     "screeningroom": null,
    //     "begintime": null,
    //     "seat": "1_10",
    //     "createTime": "2023-06-05 20:30:17",
    //     "orderNumber": 1685806205185,
    //     "state": "1",
    //     "photo": "哆啦A梦.jpg"
    // }], [{
    //     "userid": 0,
    //     "id": 0,
    //     "name": "速度与激情10",
    //     "screeningroom": null,
    //     "begintime": null,
    //     "seat": "1_5",
    //     "createTime": "2023-06-05 20:30:17",
    //     "orderNumber": 1685806456736,
    //     "state": "1",
    //     "photo": "速度与激情10.jpg"
    // }], [{
    //     "userid": 0,
    //     "id": 0,
    //     "name": "刀剑神域进击篇：暮色黄昏",
    //     "screeningroom": null,
    //     "begintime": null,
    //     "seat": "1_10",
    //     "createTime": "2023-06-05 20:30:17",
    //     "orderNumber": 1685806541338,
    //     "state": "1",
    //     "photo": "刀剑神域.jpg"
    // }], [{
    //     "userid": 0,
    //     "id": 0,
    //     "name": "刀剑神域进击篇：暮色黄昏",
    //     "screeningroom": null,
    //     "begintime": null,
    //     "seat": "1_9",
    //     "createTime": "2023-06-05 20:30:17",
    //     "orderNumber": 1685806696741,
    //     "state": "1",
    //     "photo": "刀剑神域.jpg"
    // }], [{
    //     "userid": 0,
    //     "id": 0,
    //     "name": "速度与激情10",
    //     "screeningroom": null,
    //     "begintime": null,
    //     "seat": "1_7",
    //     "createTime": "2023-06-05 20:30:17",
    //     "orderNumber": 1685806877696,
    //     "state": "1",
    //     "photo": "速度与激情10.jpg"
    // }]];
    // body = JSON.stringify(body);
    // body = JSON.parse(body);
    // console.log(body[0][0]);
    // // 目标日期和时间
    // let targetDate = null;
    //
    // let temporaryHtml = '<tr class="orderbg">\n' +
    //     '        <td height="36" colspan="2">电影名称</td>\n' +
    //     '        <td width="108">单价 (元)</td>\n' +
    //     '        <td width="102">座位号</td>\n' +
    //     '        <td width="170">实 (应) 付款 (元)</td>\n' +
    //     '        <td width="168">订单状态</td>\n' +
    //     '    </tr>';
    // for (let i = 0; i < body.length; i++) {
    //     targetDate = new Date(body[i][0].createTime);
    //     targetDate.setMinutes(targetDate.getMinutes() + 15);
    //     targetDate = targetDate.getTime();
    //     console.log(targetDate);
    //     // 1. 把订单编号/成交时间啥的拼上去
    //     temporaryHtml += '<tr><td colspan="8" class="orderbg1"><span><input name="" type="checkbox" value=""/>';
    //     temporaryHtml += '</span><span>订单编号：' + body[i][0].orderNumber;
    //     temporaryHtml += '</span><span> 成交时间：' + body[i][0].createTime + '</span><span>万达影城(南阳中泰IMAX店)</span></td></tr>';
    //     // 2. 把每个订单的第一条信息拼上去
    //     temporaryHtml += '<tr align="center"><td width="111" height="96"><p class="proimg"><img src="./img/' + body[i][0].photo + '" width="60" height="60"/></p></td>';
    //     temporaryHtml += '<td width="188">' + body[i][0].name + '</td><td>30.0</td>';
    //     temporaryHtml += '<td><strong>' + body[i][0].seat + '</strong></td>'
    //     temporaryHtml += '<td rowspan="' + body[i].length + '"><p>' + 30.0 * body[i].length + '</p><td rowspan="' + body[i].length + '">';
    //     if (1) {
    //         temporaryHtml += '<p class="red">未支付</p>';
    //         temporaryHtml += '<p>剩余支付时间: </p><p id="countdown' + i + '">' + targetDate + '</p>';
    //         temporaryHtml += '<p class="blue"><button class="button" onclick="toPay(\'' + body[i][0].orderNumber + '\')"><span>去支付</span></button></p>';
    //     } else {
    //         let num = 0;
    //         temporaryHtml += '<p class="green">已支付</p>';
    //         temporaryHtml += '<p class="blue"><button class="button" onclick="toDetail(\'' + body[i][0].orderNumber + '\')"><span>订单详情</span></button></p></tr>'
    //     }
    //
    //     for (let j = 1; j < body[i].length; j++) {
    //         temporaryHtml += '<tr align="center"><td height="96"><p class="proimg"><img src="./img/' + body[i][j].photo + '"width="60" height="60"/></p></td>';
    //         temporaryHtml += '<td>' + body[i][j].name + '</td>';
    //         temporaryHtml += '<td>30.0</td>';
    //         temporaryHtml += '<td><strong>' + body[i][j].seat + '</strong></td></tr>';
    //     }
    //     console.log("blue:" + document.getElementsByClassName("blue").length)
    //     jQuery(".ordertab1").html(temporaryHtml);
    // }


    jQuery.ajax({
        type: 'post',
        url: "/order/get_order_list",
        success: function (body) {
            body = JSON.stringify(body);
            body = JSON.parse(body);
            console.log(body);
            let targetDate = null;
            let temporaryHtml = '<tr class="orderbg">\n' +
                '        <td height="36" colspan="2">电影名称</td>\n' +
                '        <td width="108">单价 (元)</td>\n' +
                '        <td width="102">座位号</td>\n' +
                '        <td width="170">实 (应) 付款 (元)</td>\n' +
                '        <td width="168">订单状态</td>\n' +
                '    </tr>';
            for (let i = 0; i < body.length; i++) {
                targetDate = new Date(body[i][0].createTime);
                targetDate.setMinutes(targetDate.getMinutes() + 15);
                targetDate = targetDate.getTime();
                // 1. 把订单编号/成交时间啥的拼上去
                temporaryHtml += '<tr><td colspan="8" class="orderbg1"><span><input name="" type="checkbox" value=""/>';
                temporaryHtml += '</span><span>订单编号：' + body[i][0].orderNumber;
                temporaryHtml += '</span><span> 成交时间：' + body[i][0].createTime + '</span><span>万达影城(南阳中泰IMAX店)</span></td></tr>';
                // 2. 把每个订单的第一条信息拼上去
                temporaryHtml += '<tr align="center"><td width="111" height="96"><p class="proimg"><img src="./img/' + body[i][0].photo + '" width="60" height="60"/></p></td>';
                temporaryHtml += '<td width="188">' + body[i][0].name + '</td><td>30.0</td>';
                temporaryHtml += '<td><strong>' + body[i][0].seat + '</strong></td>'
                temporaryHtml += '<td rowspan="' + body[i].length + '"><p>' + 30.0 * body[i].length + '</p><td rowspan="' + body[i].length + '">';
                if (body[i][0].state === '0') {
                    temporaryHtml += '<p class="red">未支付</p>';
                    temporaryHtml += '<p>剩余支付时间: </p><p style="color: red" id="countdown' + i + '">' + targetDate + '</p>';
                    temporaryHtml += '<p class="blue"><button class="button" onclick="toPay(\'' + body[i][0].orderNumber + '\')"><span>去支付</span></button></p>';
                } else {
                    temporaryHtml += '<p class="green">已支付</p>';
                    temporaryHtml += '<p class="blue"><button class="button" onclick="toDetail(\'' + body[i][0].orderNumber + '\')"><span>订单详情</span></button></p></tr>';
                }

                for (let j = 1; j < body[i].length; j++) {
                    temporaryHtml += '<tr align="center"><td height="96"><p class="proimg"><img src="./img/' + body[i][j].photo + '"width="60" height="60"/></p></td>';
                    temporaryHtml += '<td>' + body[i][j].name + '</td>';
                    temporaryHtml += '<td>30.0</td>';
                    temporaryHtml += '<td><strong>' + body[i][j].seat + '</strong></td></tr>';
                }
                jQuery(".ordertab1").html(temporaryHtml);
            }
            init();
        }
    });


    function toPay(orderNumber) {
        location.href = "payment.html?orderNumber=" + orderNumber;
    }

    function toDetail(orderNumber) {
        location.href = "ticketDetails.html?orderNumber=" + orderNumber;
    }

    function init() {
        function updateCountdown(countdownElement, targetDate) {
            const now = new Date().getTime();
            const distance = targetDate - now;

            // 计算剩余的天、小时、分钟和秒
            const days = Math.floor(distance / (1000 * 60 * 60 * 24));
            const hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
            const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
            const seconds = Math.floor((distance % (1000 * 60)) / 1000);

            // 更新页面上的倒计时元素
            countdownElement.textContent = minutes + "分钟 " + seconds + "秒 ";

            // 如果倒计时结束，则显示特定的消息
            if (distance < 0) {
                location.href = "my_order.html";
            }
        }

        for (let i = 0; i < document.getElementsByClassName("blue").length; i++) {
            console.log("计时:" + document.getElementsByClassName("blue").length)
            const countdownElement = document.getElementById("countdown" + i);
            let targetDate = countdownElement;
            if (targetDate === null) {
                continue;
            }
            targetDate = targetDate.textContent;

            console.log(i);
            setInterval(function () {
                updateCountdown(countdownElement, targetDate);
            }, 1000);
        }
    }

    console.log("123213213");
</script>
</body>

</html>